import React from 'react'
import Timeline from '@/components/timeline'
import { Input, Button, Popconfirm, message } from 'antd'
import { get2DArray } from '@/utils'
import xia from '@/assets/icon/xia.svg'
import SvgIcon from '@/components/svgIcon'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import styles from './styles.module.less'
import { cloneDeep, divide } from 'lodash'

const InputGroup = Input.Group

class BaseCard extends React.Component {
  state = {
    standard: [{ addInput: undefined, flag: true }],
    value: '',
    saveValue: ''
  }

  add = () => {
    const { standard } = this.state
    const param = { addInput: undefined, flag: true }
    const gather = cloneDeep(standard)
    gather.push(param)
    this.setState({
      standard: gather
    })
  }

  onStadard = (e, i) => {
    const { standard } = this.state
    const val = e.target.value
    const gather = cloneDeep(standard)
    if (val.length === 11) {
      gather[i].addInput = val
      gather[i].flag = false
      this.setState({
        standard: gather
      })
    } else {
      gather[i].addInput = val
      gather[i].flag = true
      this.setState({
        standard: gather
      })
    }
  }

  remove = (i) => {
    const { standard } = this.state
    const gather = cloneDeep(standard)
    gather.splice(i, 1)
    this.setState({
      standard: gather
    })
  }

  get = () => {
    const { standard } = this.state
    console.log(standard, '获取')
  }

  render() {
    const { standard, value } = this.state
    let itemFlag = false
    standard.forEach((item) => {
      if (item.flag) {
        itemFlag = true
      }
    })
    console.log(xia, 'xia')
    const standardFlag = standard.length < 3 && standard.length > 0 ? !itemFlag : false
    return (
      <div className={styles.AddI}>
        <template>
          <SvgIcon svg={xia} style={{ width: 24, height: 24 }} />
        </template>
        {standard.map((item, i) => (
          <div className={styles.margin10} key={i}>
            <InputGroup compact>
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <Input
                  value={item.addInput}
                  style={{
                    width: '90%',
                    border: item.flag ? '1px solid red' : '',
                    marginRight: '6px'
                  }}
                  onChange={(e) => {
                    this.onStadard(e, i)
                  }}
                />
                {/* <Popconfirm
                  onConfirm={() => this.remove(i)}
                  title="你确定删除？"
                  key={i}
                  okText="确定"
                  cancelText="取消">
                  <MinusCircleOutlined />
                </Popconfirm> */}
                <MinusCircleOutlined onClick={() => this.remove(i)} />
              </div>

              <div
                style={{ display: item.flag ? 'inline-block' : 'none', color: 'red' }}
                class="ant-form-item-explain ant-form-item-explain-error">
                <div role="alert">手机号码不正确</div>
              </div>
            </InputGroup>
          </div>
        ))}
        {standardFlag ? (
          <Button
            type="dashed"
            onClick={() => {
              this.add()
            }}
            block
            icon={<PlusOutlined />}>
            Add field
          </Button>
        ) : (
          <Button
            type="dashed"
            disabled
            onClick={() => {
              this.add()
            }}
            block
            icon={<PlusOutlined />}>
            Add field
          </Button>
        )}
        <Button
          type="dashed"
          onClick={() => {
            this.get()
          }}
          block
          icon={<PlusOutlined />}>
          获取
        </Button>
      </div>
    )
  }
}
export default BaseCard
